<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文件模板管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="layui/css/layui.css">
	</head>
	<body>
		<div class="layui-layout layui-layout-admin">
			<table class="layui-hide" id="file" lay-filter="file"></table>
		<div id="pretext"></div>		
		</div>


		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
				<button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
				<button class="layui-btn layui-btn-sm" lay-event="reload">重载数据</button>
			</div>
		</script>



		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
			<a class="layui-btn layui-btn-xs" lay-event="rest">重新生成</a>
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		</script>
		
		<script src="layui/layui.js" charset="utf-8"></script>
		<script>
			layui.config({
				base: 'js/', //静态资源所在路径
			}).extend({
				http: 'http' //主入口模块
			}).use(['table', 'dropdown', 'jquery', 'http'], function() {
				var table = layui.table;
				var dropdown = layui.dropdown;
				var $ = layui.jquery;
				var api = layui.http.api;

				// 创建渲染实例
				table.render({
					elem: '#file',
					url: api + 'file/getPage?instId=', // 此处为静态模拟数据，实际使用时需换成真实接口
					toolbar: '#toolbarDemo',
					defaultToolbar: ['filter', 'exports', 'print', {
						title: '帮助',
						layEvent: 'LAYTABLE_TIPS',
						icon: 'layui-icon-tips'
					}],
					height: 'full' // 最大高度减去其他容器已占有的高度差
						,
					cellMinWidth: 80,
					page: true,
					cols: [
						[{
							type: 'checkbox',
							fixed: 'left'
						}, {
							field: 'id',
							fixed: 'left',
							width: 100,
							title: 'ID',
							sort: true
						}, {
							field: 'instId',
							width: 200,
							title: '机构号',
							edit: 'text'
						}, {
							field: 'templateName',
							width: 200,
							title: '模版名称',
							edit: 'text'
						}, {
							field: 'createTime',
							width: 300,
							title: '创建时间',
							edit: 'text'
						}, {
							field: 'updateTime',
							width: 300,
							title: '更新时间',
							edit: 'text'
						}, {
							field: 'template',
							width: 400,
							title: '模版',
							edit: 'text'
						}, {
							fixed: 'right',
							title: '操作',
							width: 200,
							toolbar: '#barDemo'
						}]
					],
					done: function() {
						var id = this.id;
					}
				});

				table.on('toolbar(demo)', function(obj) {
					alert("111")
				});


				// 工具栏事件
				table.on('toolbar(file)', function(obj) {
					var id = obj.config.id;
					var checkStatus = table.checkStatus(id);
					var othis = lay(this);
					switch (obj.event) {
						case 'getCheckData':
							var data = checkStatus.data;
							layer.alert(layui.util.escape(JSON.stringify(data)));
							break;
						case 'reload':
							table.reload('file', {});
							break;
						case 'getData':
							var getData = table.getData(id);
							console.log(getData);
							layer.alert(layui.util.escape(JSON.stringify(getData)));
							break;
						case 'add':
							break;
						case 'LAYTABLE_TIPS':
							layer.alert('Table for layui-v' + layui.v);
							break;
					};
				});

				//触发单元格工具事件
				table.on('tool(file)', function(obj) { // 双击 toolDouble
					var data = obj.data;
					if (obj.event === 'del') {
						layer.confirm('真的删除行么', function(index) {
							$.ajax({
								type: 'POST',
								url: api + 'file/delete',
								data: {
									'id': obj.data['id']
								},
								dataType: 'json',
								success: function(result) {
									if (result.code == 0) {
										layer.msg('删除成功');
									} else {
										layer.msg('删除失败');
									}
								},
								error: function(result) {
									layer.msg(result.msg);
								}
							})
							obj.del();
							layer.close(index);
						});
					} else if (obj.event === 'rest') {
						$.ajax({
							type: 'POST',
							url: api + 'file/rest',
							data: {
								'id': obj.data['id']
							},
							dataType: 'json',
							success: function(result) {
								if (result.code == 0) {
									layer.msg('重新生成成功' + '文件输出路径:{' + result.data + '}');
								} else {
									layer.msg('重新生成失败');
								}
							},
							error: function(result) {
								layer.msg(result.msg);
							}
						})
					} else if (obj.event === 'edit') {
						alert(obj.data['template'])
						var field = obj.field //得到字段
							,
							value = obj.value //得到修改后的值
							,
							data = obj.data; //得到所在行所有键值
						console.log(field);
						
					}
				});

				//触发表格复选框选择
				table.on('checkbox(file)', function(obj) {
					console.log(obj)
				});

				//触发表格单选框选择
				table.on('radio(file)', function(obj) {
					console.log(obj)
				});

				// 行单击事件
				table.on('row(file)', function(obj) {
					//console.log(obj);
					//layer.closeAll('tips');
				});
				// 行双击事件
				table.on('rowDouble(file)', function(obj) {
					console.log(obj);
				});

				// 单元格编辑事件
				table.on('edit(file)', function(obj) {
					var field = obj.field //得到字段
						,
						value = obj.value //得到修改后的值
						,
						data = obj.data; //得到所在行所有键值
					console.log(data)
					var update = {};
					update[field] = value;
					obj.update(update);
					$.ajax({
						type: 'POST',
						url: api + 'file/update',
						data: {
							'data': JSON.stringify(data)
						},
						dataType: 'json',
						success: function(result) {
							if (result.code == 0) {
								layer.msg('更新成功');
							} else {
								layer.msg('更新失败');
							}
						},
						error: function(result) {
							layer.msg(result.msg);
						}
					})
				});
			});
		</script>

	</body>
</html>
